<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view>
		<view class="question-title">
			<view v-for="(item,index) in statusItems" :key="index" :class="{btna:count == index + 2}"
				@tap="change(index +2)" class="question-item">
				{{item}}
				<view :class="{'btna-bottom':count == index +2}"></view>
			</view>
		</view>
		<view class="question-content" :class="{dis:btnNum == count}">
			<view v-for="(item,index) in list" :key="index" class="question-item" @click="activityClick(item.id)">
				<view class="activity-title">
					<view class="activity-name">{{item.activityName}}</view>
					<view :class="item.isVoted ? 'green' :'blue'">{{item.isVoted ? '已参与' :'未参与'}}</view>
				</view>
				<view class="activity-detail">
					{{item.activityContent}}
				</view>
				<view class="activity-bottom">
					<view class="activity-time">
						活动结束时间：{{$funcs.toLocalTime(item.endTime)}}
					</view>
					<view class="activity-voter">
						{{item.voter}} 已参与
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		data() {
			return {
				btnNum: 3,
				statusItems: ["未开始", "进行中", "已结束"],
				count: 3,
				status: 3, //2：未开始，3:进行中，4：已结束
				current: 1,
				pages: 1,
				list: [],
				more: 'more',
			}
		},
		mounted() {
			this.getDataList(this.status)
		},
		onShow() {
			this.getDataList(this.status)
		},
		onPullDownRefresh() {
			this.getDataList(this.status)
		},
		onReachBottom() {
			this.getDataList(this.status, true)
			this.more = 'loading'
		},
		methods: {
			change(e) {
				this.count = e
				this.btnNum = e
				console.log(this.count)
				this.getDataList(this.count, false)
			},
			getDataList(status, isMore) {
				//加一页
				if (isMore && this.pages > this.current) {
					this.current++
				}

				uni.showLoading({
					title: '加载中'
				});

				this.$http.post('vx/activity/list', {
					projectId: uni.getStorageSync('projId'),
					activityType: 2,
					status: this.count,
					pagination: {
						"pageSize": 10,
						"current": this.current
					},
					sorter: {
						"field": "id",
						order: 0
					}
				}).then(
					res => {
						uni.stopPullDownRefresh();
						if (res.code == 10000) {
							let list = res.data.list || []
							this.pages = res.data.total / 10 + 1
							console.log(res.data)
							console.log(isMore)
							if (isMore) {
								if (this.pages > this.current) {
									this.list = this.list.concat(list)
								} else {
									this.more = 'nomore'
								}

							} else {
								this.list = list
							}
						}
					}
				)

			},
			onStatusChange(status) {
				this.more = 'nomore'
				this.current = 1
				this.status = status
				this.getDataList(this.status)

			},
			activityClick(id) {
				uni.navigateTo({
					url: '../questionnaireInfo/questionnaireInfo?id=' + id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.question-title {
		font-size: 32rpx;
		padding: 25rpx 0 10rpx 0;
		display: flex;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		justify-content: center;
	}

	.question-title view {
		position: relative;
		flex-grow: 1;
		text-align: center;
	}

	.question-content {
		display: none;
		background: #EEEEEE;
		font-size: 32rpx;
		.question-item{
			margin-bottom: 20rpx;
			background: #fff;
		}
	}

	.btna {
		color: $theme-color;
	}

	.dis {
		display: block;
	}

	.btna-bottom {
		position: absolute;
		left: 35%;
		bottom: -10rpx;
		text-align: center;
		width: 30%;
		height: 6rpx;
		background: $theme-color;
	}

	.activity-title {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 5% 10rpx;
		.activity-name{
			color: #474747;
			text-indent: 1.6em;
			position: relative;
		}
		.activity-name::before {
			content: '';
			background: $theme-color;
			position: absolute;
			display: block;
			width: 12rpx;
			height: 30rpx;
			top: 8rpx;
			right:0;
			bottom: -1rpx;
			left: 0;
			border-radius: 10rpx;
		}
	}
	.activity-detail{
		text-indent: 2em;
		font-size: .8em;
		padding: 20rpx 5%;
		color: #ADADAD;
		line-height: 1.5;	
	}
	.activity-bottom{
		display:flex;
		justify-content: space-between;
		color: #848380;
		font-size: .8em;
		padding: 0 5% 40rpx;
	}
	.green{
		color: #4CBA3D;
	}
	.blue{
		color: #5DC5FB;
	}
</style>
